<template>
	<view class="area-picker" @touchmove.stop.prevent="() => {}">
    <uni-data-picker v-slot:default="{ data, error, options }" title="请选择出生地区" :localdata="areaInfo" v-model="areaValue">
      <view class="input-border">
        <view v-if="error" class="error">
          <text>{{ error }}</text>
        </view>
        <view v-else-if="data.length" class="input-selected">
          <view>{{ areaString(data) }}</view>
        </view>
        <view v-else><text class="place-style">{{placeholder}}</text></view>
      </view>
    </uni-data-picker>
	</view>
</template>

<script>
import { getAreaInfoApi } from '@/http/api'

export default {
	data() {
		return {
      areaValue: "",
      areaInfo: []
		}
	},
	props: {
		value: {
			type: String,
			default: ""
		},
    placeholder: {
			type: String,
			default: ""
    }
	},
  model: {
    prop: 'value',
    event: 'newValue'
  },
  watch: {
  	areaValue(value) {
      this.$emit('newValue', this.areaValue)
  	}
  },
	methods: {
    areaString(data) {
      let txt = "";
      for(let item of data) {
        txt += item.text;
      }
      return txt
    }
  },
  created() {
		getAreaInfoApi().then(res => {
			if (res.code === 200) {
        this.areaInfo = res.data
			}else{
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
      }
		})
  }
}
</script>

<style lang="scss" scoped>
.area-picker {
	width: 100%;
  ::v-deep .uni-data-tree-dialog {
    z-index: 999;
    // bottom:  var(--window-bottom);
  }
}
.input-selected {
	display: flex;
	flex-direction: row;
	line-height: 2;
  font-size: 32rpx;
  view {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.place-style {
  color: grey;
  font-size: 32rpx;
}
</style>
